<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <form>
    <select id="province">
      <option value="-1">请选择</option>
    </select>
    <select id="city"></select>
    <select id="country"></select>
  </form>
  <script type="text/javascript">
    //省份数组
    var provinceArr =
      ['上海', '江苏', '河北']
    //城市数组
    var cityArr = [
      ['上海市'],
      ['苏州市', '南京市', '扬州市'],
      ['石家庄', '秦皇岛', '张家口']
    ]
    //区域数组
    var countryArr = [

      [['黄浦区', '静安区', '常宁市', '浦东区']],



      [['虎丘区', '吴中区', '相城区', '姑苏区', '吴江区'],
      ['宣武区', '秦淮区', '建秋区', '鼓楼区', '浦口区'],
      ['湛江区', '广陵区', '江都区']],

      [
        ['长安区', '桥西区', '新华区', '金金矿区'],
        ['海港区', '山海关区', '北戴河区', '武宁区'],
        ['桥东区', '桥西区', '宣化区', '下花园区']
      ]

    ]

    //第一步
    function createOption(obj, data) {
      for (var i in data) {
        var op = new Option(data[i], i)
        obj.options.add(op)
      }
    }
    var province = document.getElementById('province')
    createOption(province, provinceArr)
    //第二步
    var city = document.getElementById('city');
    province.onchange = function () {
      city.length = 0;
      createOption(city, cityArr[province.value]);
      if (province.value >= 0) {
        city.onchange();
      } else {
        country.options.length = 0
      }
    };
    //第三步
    var country = document.getElementById('country')
    city.onchange = function () {
      country.options.length = 0;
      createOption(country, countryArr[province.value][city.value])
    }
  </script>
</body>

</html>